.headchara{
	margin:0 auto;
	max-width: 1200px;
}

.headchara_image{
	background-size: auto 100%;
	background-repeat: no-repeat;
	height:0;
	padding-bottom: 50%;
}

.head_page{
	position:relative;
	width:70%;
	margin-left: 30%;
	height:0;
	padding-bottom:50%;
}

.dialogue{
	text-align: center;
    font-family: dialogue;
	text-shadow: 1px 1px 0px #000000;
}

.headchara_inform{
	position:absolute;
	top:3em;
	left:0;
}

.bubble{
	background-size: 100% auto;
	background-repeat: no-repeat;
	position:relative;
	width:25em;
	height:25em;
	text-shadow: 1px 1px 0px #000000;
}

.bubble_content{
	position:absolute;
	top:5em;
	left:4em;
}

.headchara_menu{
	position:absolute;
	list-style: none;
	bottom:0;
	right:0;
	width:calc(100% - 25em);
	height:calc(100% - 5em);
}
	
.headchara_term{
	position:relative;
	display:inline-block;
	width:50%;
	height:50%;
}

.bubble_small{
	position:absolute;
	width:75%;
	height:75%;
	cursor:pointer;
	text-shadow: 1px 1px 0px #000000;
}

.bubble_small_image_box{
	position:absolute;
	width:100%;
	height:100%;
}

.bubble_small_image{
	width:100%;
}

.bubble_small_content{
	padding-top: 40%;
	text-align: center;
}


@media screen and (max-width: 1200px) {
	.bubble{
		width:21em;
		height:21em;
	}
	.bubble_content{
		top:4em;
		left:3em;
	}
	.headchara_menu{
		width:calc(100% - 21em);
	}
}

@media screen and (max-width: 800px) {
	.headchara_image{
		padding-bottom: 75%;
	}
	.head_page{
		padding-bottom: 75%;
	}

	.headchara_inform{
		top:0;
		left:calc(50% - 6em);
	}
	.bubble{
		width:12em;
		height:12em;
	}
	.headchara_menu{
		width:100%;
		height:70%;
	}
}

@media screen and (max-width: 600px) {
	.headchara_image{
		padding-bottom: 100%;
	}
	.head_page{
		width:60%;
		margin-left: 40%;
		padding-bottom: 100%;
	}
	.headchara_menu{
		height:60%;
	}
}